<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
	<meta charset="utf-8">
	<title>故障点详情</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="description">
	<meta content="" name="author">
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN PAGE STYLES -->
	<link href="../assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" />
	<!-- END PAGE STYLES -->
	<!-- BEGIN THEME STYLES -->
	<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
	<link href="../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
	<link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
	<link href="../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
	<link href="../assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="logo.png">
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->

<body>

	<div id="app">
		<!-- BEGIN PAGE CONTAINER -->
		<div class="page-container" v-cloak>
			<!-- BEGIN PAGE CONTENT -->
			<div class="page-content">
				<div class="container">
					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12">
							<!-- BEGIN PORTLET-->
							<div class="portlet light tasks-widget simulate simulate-4">
								<div class="portlet-title tabbable-line gj-title">
									<div class="caption caption-md">
										<i class="icon-globe theme-font hide"></i>
										<span class="caption-subject theme-font bold" style="color: #fff!important;"
											v-text="gaojing.linkName"></span>
									</div>
								</div>
								<div class="portlet-body fix-height">
									<div class="font-grey-mint font-sm">
										链路名称：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.lineName"></div>
									<p style="border-bottom: 3px solid #F4F6F9;"></p>
									<div class="font-grey-mint font-sm margin-top-10">
										涉及业务名称：
									</div>
									<div class="font-md font-blue-sharp">
										<p v-for="work in gaojing.works" v-text="work"></p>
									</div>
									<div class="font-grey-mint font-sm margin-top-10">
										故障类型：
									</div>
									<div class="font-md font-red bold" v-text="gaojing.status"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										故障时间：
									</div>
									<div class="font-md font-blue-sharp">
										<span v-text="gaojing.times"></span>
									</div>
									<div class="font-grey-mint font-sm margin-top-10">
										故障断点距起点（米）：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.statusValue"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										故障点地理位置：
									</div>
									<div class="font-md font-blue-sharp">
										在节点【<span v-text="gaojing.origin"></span>】和节点【<span
											v-text="gaojing.finishing"></span>】之间。
										<br>
										距离节点【<span v-text="gaojing.origin"></span>】大约<span
											v-text="gaojing.distance"></span>米。
									</div>
									<div class="font-grey-mint font-sm margin-top-10">
										联系人
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.cancat"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										光传输面板
									</div>
									<div class="font-md font-blue-sharp">
										<img src="../assets/admin/pages/img/001.png" alt="">
										<img src="../assets/admin/pages/img/002.png" alt="">
									</div>
									<div class="margin-top-20">
										<a type="submit" class="btn btn-sm red btn-block" @click="dingwei">故障点定位</a>
									</div>
									<div class="margin-top-10">
										<a type="submit" class="btn btn-sm blue btn-block" @click="jiechu">故障解除</a>
									</div>

								</div>
							</div>
						</div>
						<!-- END PORTLET-->
					</div>
				</div>

				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
		<!-- END PAGE CONTENT -->
	</div>
	<!-- END PAGE CONTAINER -->

	<!-- BEGIN JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->

	<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
	<script src="assets/layer/layer.js" type="text/javascript"></script>
	<script src="assets/js/vue.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/xlsx.full.min.js"></script>
	<script src="assets/js/config.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->
	<script>
		(function ($) {
			$.extend({
				urlGet: function (key) {
					var aQuery = window.location.href.split("?");  //取得Get参数
					var aGET = new Array();
					if (aQuery.length > 1) {
						var aBuf = aQuery[1].split("&");
						for (var i = 0, iLoop = aBuf.length; i < iLoop; i++) {
							var aTmp = aBuf[i].split("=");  //分离key与Value
							aGET[aTmp[0]] = aTmp[1];
						}
					}
					console.log(key);
					if (!key) {
						return aGET
					}
					if (aGET[key]) {
						return aGET[key]
					} else {
						return undefined
					}
				}
			})
		})(jQuery);
		jQuery(document).ready(function () {
			const { createApp } = Vue;
			const app = createApp({
				data() {
					return {
						gaojing: {}
					}
				},
				methods: {
					load() {
						layer.load(0, { msg: "努力加载中，请稍后..." });
						try {
							layer.load(0, { msg: "努力加载中，请稍后..." });
							axios.post(config.getUrl() + "/getGaojing", { gaojingId: this.gaojing.gaojingId }).then(res => {
								if (res.status == 200) {
									console.log(res);
									if (res.data.code == 0) {
										layer.closeAll()
										if (res.data.data instanceof Object || Object.keys(res.data.data).length > 0) {
											let dt = res.data.data;
											for (var k in dt) {
												if (k == "works") {
													this.gaojing[k] = JSON.parse(dt[k]);
												} else {
													this.gaojing[k] = dt[k];
												}
											}
											console.log(this.gaojing);
										}
									} else {
										layer.closeAll();
										layer.alert("获取信息失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
										try {
											console.log(aaa);
										} catch (error) {
											console.log(error);
										}
									}
								} else {
									layer.closeAll();
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
									try {
										console.log(aaa);
									} catch (error) {
										console.log(error);
									}
								}
							})
						} catch (error) {
							console.log(error);
							layer.closeAll();
						}
					},
					dingwei() {
						try {
							layer.load(0, { msg: "努力加载中，请稍后..." });
							axios.post(config.getUrl() + "/dingwei", { gaojingId: this.gaojing.gaojingId,linkName:this.gaojing.linkName }).then(res => {
								if (res.status == 200) {
									layer.closeAll();
									if (res.data.code == 0) {
									} else {
										layer.closeAll();
										layer.alert("定位失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
									}
								} else {
									layer.closeAll();
									layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
								}
							})
						} catch (error) {
							console.log(error);
							layer.closeAll();
						}
					},
					jiechu() {
						try {
							var that = this;
							if (this.gaojing.gaojingType == 1) {
								layer.confirm(`本次告警为真实告警，确定要手动解除吗`, { btn: ['是', '否'] }, function () {
									layer.load(0, { msg: "努力加载中，请稍后..." });
									console.log(that.gaojing);
									let vd = { gaojingId: that.gaojing.gaojingId, gaojingType: 1, status: "正常", statusValue: "",linkId:that.gaojing.linkId};
									console.log(vd);
									axios.post(config.getUrl() + "/secureGaojing", vd).then(res => {
										if (res.status == 200) {
											layer.closeAll();
											console.log(res.data);
											if (res.data.code == 0) {
												return res.data.data;
											} else {
												layer.msg(res.data.msg, { time: 3000 });
												try {
													console.log(aa);
												} catch (error) {

												}
											}
										} else {
											layer.closeAll();
											try {
												console.log(aaa);
											} catch (error) {

											}
											layer.msg("网络错误", { time: 3000 });
										}
									}).then(rs => {
										console.log("rs=>", rs);
										axios.post(config.getUrl() + "/jiechu", { linkName: that.gaojing.linkName,linkId:that.gaojing.linkId, gaojingId: rs.gaojing.gaojingId }).then(res => {
											if (res.status == 200) {
												console.log(res);
												layer.closeAll();
												if (res.data.code == 0) {
													/* layer.alert("解除故障成功", {
														icon: 1, yes: function () {
															window.location.href = `${config.baseUrl}/mnyxed`;
														}
													}); */
													window.location.href = `${config.baseUrl}/mnyxed`;
												} else {
													layer.closeAll();
													layer.alert("解除故障失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
												}
											} else {
												layer.closeAll();
												layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
											}
										})
									})
								})
							} else {
								layer.load(0, { msg: "努力加载中，请稍后..." });
								let vd = { gaojingId: this.gaojing.gaojingId, gaojingType: 0, status: "正常", statusValue: "",linkId:this.gaojing.linkId};
								axios.post(config.getUrl() + "/secureGaojing", vd).then(res => {
									if (res.status == 200) {
										layer.closeAll();
										console.log(res.data);
										if (res.data.code == 0) {
											return res.data.data;
										} else {
											layer.msg(res.data.msg, { time: 3000 });
											try {
												console.log(aa);
											} catch (error) {

											}
										}
									} else {
										layer.closeAll();
										try {
											console.log(aaa);
										} catch (error) {

										}
										layer.msg("网络错误", { time: 3000 });
									}
								}).then(rs => {
									console.log("rs=>", rs);
									axios.post(config.getUrl() + "/jiechu", { linkName: this.gaojing.linkName,linkId:this.gaojing.linkId, gaojingId: rs.gaojing.gaojingId }).then(res => {
										if (res.status == 200) {
											console.log(res);
											layer.closeAll();
											if (res.data.code == 0) {
												/* layer.alert("解除故障成功", {
													icon: 1, yes: function () {
														window.location.href = `${config.baseUrl}/mnyx`;
													}
												}); */
												window.location.href = `${config.baseUrl}/mnyxed`;
											} else {
												layer.closeAll();
												layer.alert("解除故障失败，代码为：" + res.data.msg, { icon: 1, time: 3000 });
											}
										} else {
											layer.closeAll();
											layer.alert("网络连接失败，请联系管理员", { icon: 1, time: 3000 });
										}
									})
								})
							}


						} catch (error) {
							console.log(error);
							layer.closeAll();
						}
					}
				},
				created() {
					this.gaojing.gaojingId = $.urlGet("gaojingId");
					this.load()
				},
			});
			app.mount("#app")
		})
	</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->

</html>